﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test2.aspx.cs" Inherits="Test2" Title="Test2"  %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
     <form id="form1" runat="server">
    <div>

<script type="text/javascript">
    function onClientUploadComplete(sender, e) {
        onImageValidated("TRUE", e);
    }

    function onImageValidated(arg, context) {

        var test = document.getElementById("testuploaded");
        test.style.display = 'block';

        var fileList = document.getElementById("fileList");
        var item = document.createElement('div');
        item.style.padding = '4px';

        if (arg == "TRUE") {
            var url = context.get_postedUrl();
            url = url.replace('&amp;', '&');
            item.appendChild(createThumbnail(context, url));
        } else {
            item.appendChild(createFileInfo(context));
        }

        fileList.appendChild(item);
    }
    function createFileInfo(e) {
        var holder = document.createElement('div');
        holder.appendChild(document.createTextNode(e.get_fileName() + ' with size ' + e.get_fileSize() + ' bytes'));

        return holder;
    }

    function createThumbnail(e, url) {
        var holder = document.createElement('div');
        var img = document.createElement("img");
        img.style.width = '80px';
        img.style.height = '80px';
        img.setAttribute("src", url);

        holder.appendChild(createFileInfo(e));
        holder.appendChild(img);

        return holder;
    }

    //AsyncFileUpload
    // This function will execute after file uploaded successfully
    function uploadComplete() {
        document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "File Uploaded Successfully";

        var uploadText = document.getElementById('<%=AsyncFileUpload1.ClientID %>').getElementsByTagName("input");
        for (var i = 0; i < uploadText.length; i++)
        {
            if (uploadText[i].type == 'text')
            {
                uploadText[i].value = '';
            }
        }
    }
    // This function will execute if file upload fails
    function uploadError() {
        document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "File upload Failed.";
}
</script>
    <%--<ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1"/>--%>
    <asp:Label runat="server" ID="myThrobber" Style="display: none;"><img align="absmiddle" alt="" src="images/uploading.gif"/></asp:Label>
    <ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server" OnUploadComplete="FileUploadComplete" Width="400px"
        OnClientUploadComplete="onClientUploadComplete" ThrobberID="myThrobber"/>
    <div id="uploadCompleteInfo"></div>
        <br />
        <div id="testuploaded" style="display: none; padding: 4px; border: gray 1px solid;">
            <h4>
                list of uploaded files:</h4>
            <hr />
            <div id="fileList">
            </div>
        </div>

    <p></p>

    <ajaxToolkit:AsyncFileUpload ID="AsyncFileUpload1" OnClientUploadComplete="uploadComplete" OnClientUploadError="uploadError"
    CompleteBackColor="White" Width="350px" runat="server" UploaderStyle="Traditional" UploadingBackColor="#CCFFFF"
    ThrobberID="imgLoad" OnUploadedComplete="AsyncFileUploadComplete" /><br />
    <asp:Image ID="imgLoad" runat="server" ImageUrl="loading.gif" />
    <br />
    <asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>


        <asp:Image ID="imageShow" runat="server" ImageUrl="" />

    </div>
    </form>
</body>
</html>